<template>
  <div>
    <son-a
      v-model="grandFaterValue"
      clearable
      :disabled="false"
      :maxlength="100"
      @blur="handleBlur"
      @input="handleInput"
      @focus="handleFocus"
      class="hello"
      style="background: #fff; color: red; border: 1px solid greenyellow"
    ></son-a>
    <son-b
      v-model="grandFaterValue"
      clearable
      :disabled="false"
      class="hello"
      style="background: #fff; color: red; border: 1px solid greenyellow"
    ></son-b>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import sonA from './son-a.vue'
import sonB from './son-b.vue'
let grandFaterValue = ref('hello world')
const handleBlur = () => {
  console.log('blur', grandFaterValue.value)
}
const handleInput = () => {
  console.log('input', grandFaterValue.value)
}
const handleFocus = () => {
  console.log('focus', new Date().getTime(), grandFaterValue.value)
}
</script>
<style lang="scss" scoped></style>
